<template>
  <div class="treeForm">
    <slot name="btn-slot"></slot>
    <!-- 按条件搜索 -->
    <div class="tree-filter">
      <el-input placeholder="请输入" v-model="filterText" suffix-icon="el-icon-search"></el-input>
    </div>
    <!-- 树型结构 -->
    <el-tree class="filter-tree tree-content" :data="treeData" :props="defaultProps" default-expand-all
      ref="tree" :filter-node-method="filterNode">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i v-if="!data.id" :class="['expanded',{'el-icon-plus':!node.expanded,'el-icon-minus':node.expanded}]"></i>
        <icon-svg v-else style="font-size: 18px" iconClass="icon-yuanhuise"></icon-svg>
        <span :class="['node-ellips',{'node-label':data.id}]" @click="handleNodeClick($event,data,node)">{{node.label}}</span>
        <div class="node-btn" v-if="data.id">
          <icon-svg :class="{'bt-lock': data.isLock}" style="font-size: 20px;" :iconClass="data.isLock ? 'bt-lock' : 'bt-unlock'" @click="changeLock(data)"></icon-svg>
          <!-- <i class="el-icon-remove-outline" style="color:#a5a6a5;font-size: 20px" @click="delTreeNode(data,node)"></i> -->
        </div>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { getExamProjectLibraryList  } from '@/api/setting/maintain/codeMapMaintain.js'

export default {
  name: 'examProjectLibraryList',
  props: ['manual'],
  data() {
    return {
      filterText: '',
      // 体检项目库数据
      treeData: [{
        label: '体检项目库',
        children:[]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentId: null
    }
  },
  created() {
    if(!this.manual) this.getProjectLibraryList()
  },
  methods: {
    // queryData(id) {
      // getProjectInfo({ physicalExaminationProjectId: id }).then( res => {
      //   this.relationList = res.data;
      // })
      // this.$emit('queryTableData', id)
    // },
    getProjectLibraryList(index = 0){
      getExamProjectLibraryList().then(res => {
        this.treeData[0].children = res.data || [];
        this.treeData[0].children.forEach(item=>{
          item.label = item.projectNumber ? item.projectNumber + ' ' + item.projectName : item.projectName
        })
        this.clickFirstNode(index)
      })
    },
    filterNode(value, data, node) {
      let parentNode = node.parent // 父级node
      let labels = [node.label] // 当前node的名字
      let level = 1 // 层级
      while (level < node.level) {
          labels = [...labels, parentNode.label] // 当前node名字，父级node的名字
          parentNode = parentNode.parent
          level++
      }
      return labels.some(d => d.indexOf(value) !== -1)
    },
    handleNodeClick($el,data, node) {
      /* if(!data.projectCode) return
      this.$emit('queryTableData', data.id, data.projectName, data.isLock) */
      if(data.id){
        if(this.currentId == data.id) return
        document.querySelectorAll('.node-active').forEach(item=> item.classList.remove('node-active'))
        $el.target.classList.add('node-active')
        this.currentId = data.id
        this.$emit('queryTableData', data.id, data.projectName, data.isLock, data)
      }
    },
    changeLock(data) {
      let flag = data.isLock ? false : true;
      this.$set(data, 'isLock', flag);
    },
    // 默认选中第一个节点
    clickFirstNode(_index){
      setTimeout(()=>{
        if(document.querySelector('.node-label')) document.querySelectorAll('.node-label')[_index].click()
      },0)
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
}
</script>


<style lang="less" scoped>
  .tree-filter{
    padding: 20px 20px 0 20px;
  }
  /* 树形控件样式 */
  /deep/ .el-tree {
    background: #fff !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
  }
  /deep/ .el-tree-node__content{
		height: 30px;
	}
  .treeForm {
    width: 350px;
    border: 1px solid #e3dddd;
  }
  .filter-tree {
    max-height: calc(100vh - 300px);
    overflow: auto;
  }
  /* .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  } */
  .tree-content{ 
    margin-left: 10px;
  }
  .expanded{
    font-size: 12px;
    border: 1px solid #808080;
    color: #808080;
  }
  .node-btn{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .bt-lock{
    margin-left: -3px;
    margin-right: 3px;
  }
  .node-label{
    display: inline-block;
    padding: 10px 0;
    width: 214px;
  }
  .node-active{
    color: #83a1f7;
  }
  .node-ellips{
    margin-left: 14px;
    display: inline-block;
    max-width: 214px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .custom-tree-node{
    display: flex;
    align-items: center;
  }
  /deep/ .el-tree-node__expand-icon{
    display: none;
  }
  /deep/ .el-tree-node__content{
    height: 30px;
  }
  /deep/ .el-tree-node{
    position: relative;
  }
  /deep/ .tree-content > .el-tree-node:before,
  /deep/ .tree-content > .el-tree-node > .el-tree-node__children > .el-tree-node:before {
    content: " ";
    border-left: 1px dashed #4386c6;
    position: absolute;
    bottom: 0px;
    top: 30px;
    left: 8px;
    width: 1px;
    z-index: 98;
  }
  /deep/ .tree-content > .el-tree-node > .el-tree-node__children > .el-tree-node:before{
    left: 27px;
    bottom: -8px;
    top: 20px;
  }
</style>